<template>
   {{ person.name }},{{ person.age }}
   {{ name }},{{ age }}
   <button @click="changeName">改变姓名</button>
</template>
<script setup>
  import { useHead } from '@vueuse/head';
  useHead({
    title: 'toRef, toRefs',
    meta: [
      { name: 'description', content: 'toRef, toRefs' }
    ]
  });

  import { ref, reactive, toRef, toRefs } from 'vue'

  const person = reactive({
    name:'张三',
    age:18
  })
  const {name,age} = toRefs(person)// toRefs() 可以将响应式对象的所有属性都转换为 ref 对象
  console.log(name,age);// name,age 都是 ref 对象
  const changeName = () =>{
    person.name = '李四'// 改变响应式对象的属性值,也会改变 ref 对象的属性值
  }
  console.log(toRef(person,'name'))// toRef() 可以将响应式对象的属性转换为 ref 对象
</script>



<style scoped>
  button{
    margin: 10px;
  }
</style>